<template>
  <!-- 通知配置 -->
<el-dialog :model-value="showNotice" title="通知配置" :before-close="handleCancel" @open="openHandle">
  <div class="tips">商品下架/库存预警会按照一下配置进行消息通知</div>
  <NoticeConfig :show-title="false" :label-width="0" ref="noticeConfigRef" service-type="activity" :act-id="currentActInfo.id" style="margin-top: 16px;"/>
  <template #footer>
    <el-button @click="handleCancel">取消</el-button>
    <el-button @click="handleConfirm" type="primary">确定</el-button>
  </template>
</el-dialog>
</template>

<script setup lang="ts">
import NoticeConfig from "@/components/noticeConfig/index.vue"
import { getActNoticeConfig,saveActNoticeConfig } from "@/api/activity"
const props=defineProps({
  showNotice:{
    type:Boolean,
    default:false
  },
  currentActInfo:{
    type:Object,
    default:()=>({})
  }
})
const configId=ref()
const noticeConfigRef=ref()
const emits = defineEmits(["update:showNotice"]);
const handleCancel=()=>{
  noticeConfigRef.value.resetForm()
  emits('update:showNotice',false)
}
const getConfigData=async ()=>{
  const res = await getActNoticeConfig({
    actId:props.currentActInfo.id
  })
  if(res.code==200){
    if(res.payload){
      configId.value=res.payload.id
      noticeConfigRef.value.getFormData(res.payload)
    }
  }

}
const handleConfirm=async ()=>{
  const noticeData=await noticeConfigRef.value.validForm()
  const data={
    id:configId.value,
    noticePhones:noticeData.noticePhones,
    noticeType:noticeData.noticeType,
    actId:props.currentActInfo.id,
    noticeUserIds:noticeData.noticeUserIds?String(noticeData.noticeUserIds):undefined,
    noticeWebhookUrls:noticeData.noticeWebhookUrls??undefined
  }
  const res=await saveActNoticeConfig(data)
  if(res.code==200){
    ElMessage.success('配置成功！')
    handleCancel()
  }
}

const openHandle=()=>{
  nextTick(()=>{
    getConfigData()
  })
}

</script>
<style lang="scss" scoped>
.tips {
  display: inline-block;
  border: solid 1px var(--el-color-primary);
  color: var(--el-color-primary);
  background: rgba(0, 30, 112, 0.04);
  font-size: 14px;
  padding: 10px;
  border-radius: 4px;
}
.common-check{
  width:120px;
}
.label:before{
  content: "*";
  color: var(--el-color-danger);
  margin-right: 4px;
}
.special-divider{
  color:#666;
  margin:8px;
}
.error{
  color: var(--el-color-danger);
  font-size: 12px;
}
</style>